<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <div class="task" >

    <van-tabbar v-model="active" :fixed="status" @change="changeTab" >
      <van-tabbar-item icon="info-o" :info="note.waiting_order">待接单</van-tabbar-item>
      <van-tabbar-item icon="clock-o" :info="note.processing_order" >进行中</van-tabbar-item>
      <van-tabbar-item icon="question-o" :info="note.review_order" >待审核</van-tabbar-item>
      <van-tabbar-item icon="passed" >已完成</van-tabbar-item>
      <van-tabbar-item icon="close" >已关闭</van-tabbar-item>
    </van-tabbar>

    <div class="null" v-if="isfull">
      <img src="../../assets/images/nullData.png" alt="" >
      <p>没有数据</p>
    </div>
    <div class="" v-if="!isfull" v-for="(item,index) in list"  :key="index" >
      <van-card
      style ="background-color: #fff;margin-top: 5px"
      tag="图文单"
      :price="item.commission+'（佣金）'"
      :desc="item.task_content"
      :title="item.task_title"
      :thumb="item.cover"
      >
        <!--:thumb-link="'/taskAcceptCheck?task_id='+item.task_id"-->
        <!--task_queue_status-->
      <div slot="footer">
        <div v-if="listParameter.type==1"> <!--待接单-->
          <van-button round plain size="small" type="primary" @click="submit(item.task_id)" >去接单</van-button>
        </div>
        <div v-else-if="listParameter.type==2" > <!--进行中-->
          <van-button round plain size="small" type="primary" @click="goSubmit(item.task_id, item.task_queue_id)" >提交任务</van-button>
        </div>
        <div v-else-if="listParameter.type==3" > <!--待审核-->
          <van-button round plain size="small" type="primary" v-if="item.task_queue_status==2" @click="goSubmit(item.task_id, item.task_queue_id)" >审核中</van-button>
          <van-button round plain size="small" type="primary" v-if="item.task_queue_status==4" @click="goSubmit(item.task_id, item.task_queue_id)" >审核失败重新上传</van-button>

        </div>
        <div v-else-if="listParameter.type==4" > <!--已完成-->
          <van-button round plain size="small" type="primary" @click="goSubmit(item.task_id, item.task_queue_id)" >已完成</van-button>
        </div>
        <div v-else-if="listParameter.type==5" > <!--已关闭-->
          <!--task_queue_status-->
          <van-button round plain size="small" type="danger" v-if="item.task_queue_status==6" @click="submit(item.task_id, item.task_queue_id)" >审核失败关闭</van-button>
          <van-button round plain size="small" type="danger" v-if="item.task_queue_status==7" @click="submit(item.task_id, item.task_queue_id)" >超时关闭</van-button>
          <!--1=进行中待审核 2=审核中 3=审核通过 4=审核失败重新上传  5=重新审核 6=审核失败关闭-->
        </div>

      </div>
      </van-card>
    </div>

  </div>
  </van-pull-refresh>
</template>
<script>
  import { getMyReceiveTask,taskReceive } from "../../api/user";
  import { Toast } from "vant";
  import { PullRefresh } from 'vant';
export default {
  data() {
    return {
      isLoading: false,
      status:false,
      active: 0,
      listParameter:{
        pageno:1,
        pagesize:10,
        type:1,//必填 1.待接单，2.进行中，3.待审核，4.已完成，5.已关闭
      },
      count:0,
      isfull:false,
      list:[],
      note:{
        waiting_order: "",//待接的任务
        processing_order: "",//进行中的任务
        review_order: ""//待审核的任务
      },
    };
  },
  methods: {
    changeTab() {
      console.log(this.active);
      if(this.active==0){
        this.listParameter.type = 1;
      }else if(this.active==1){
        this.listParameter.type = 2;
      }else if(this.active==2){
        this.listParameter.type = 3;
      }else if(this.active==3){
        this.listParameter.type = 4;
      }else if(this.active==4){
        this.listParameter.type = 5;
      }
      this.getData();
    },
    goSubmit(task_id, task_queue_id) {
      this.$router.push({
        path: "/submit",
        query: {
          task_id: task_id,
          task_queue_id: task_queue_id
        }
      });
    },
    submit(task_id) {  //领取任务
      this.$router.push({
        path: "/taskAcceptCheck",
        query: {
          task_id: task_id,
          // task_queue_id: task_queue_id
        }
      });
    },
    getData() {
      getMyReceiveTask(this.listParameter).then(res => {

        if(res.data.waiting_order==0){
          if(this.note.waiting_order !=""){
            this.note.waiting_order = ""
          }
        }else{
          if(this.note.waiting_order != res.data.waiting_order ){
            this.note.waiting_order = res.data.waiting_order
          }
        }

        if(res.data.processing_order==0){
          if(this.note.processing_order !=""){
            this.note.processing_order = ""
          }
        }else{
          if(this.note.processing_order != res.data.processing_order ){
            this.note.processing_order = res.data.processing_order
          }
        }

        if(res.data.review_order==0){
          if(this.note.review_order !=""){
            this.note.review_order = ""
          }
        }else{
          if(this.note.review_order != res.data.review_order ){
            this.note.review_order = res.data.review_order
          }
        }

        if (res.data.count == 0) {
          this.isfull = true;
        }else{
          this.isfull = false;
          this.list = res.data.list;
        }

      });
    },
    onRefresh() {

      setTimeout(() => {
        this.getData();
        Toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 500);



      // this.isLoading = false;
      // Toast("刷新成功");
      // setTimeout(() => {
      //   this.$toast('刷新成功');
      //   this.isLoading = false;
      //   this.count++;
      // }, 500);
    }

  },
  created() {
    this.getData();
  }
};
</script>

<style lang="scss">

.task {
  width: 100%;
  background-color: #f1f1f1;
  .banner {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
  }

  .null {
    // position: fixed;
    // left: 50%;
    // top: 60%;
    // transform: translate(-50%, -80%);
    text-align: center;
    p {
      padding-top: 8px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #999;
    }
  }

   .tabs {
      width: 100%;
      height: 75px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      img {
        vertical-align: middle;
        width: 20px;
      }
      span {
        vertical-align: middle;
        padding-left: 10px;
        font-size: 14px;
      }
    }
}
</style>

